<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入内容" id="ipt">
    <script>
        function debounce(fn, delay) {
            let timer = null
            return function() {
                let that = this
                let args = arguments
                if(timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    // apply第二个参数是数组 若结构数组会报错
                    // 这里直接用this也没关系 因为是箭头函数
                    // console.log(this); // 打印的是input上下文
                    fn.apply(that, args)
                }, delay)
                // timer = setTimeout(function () {
                //     // console.log(this); // 这里打印的是window
                //     fn(...args)
                // }, 500)
            }
        }
        document.querySelector('#ipt').addEventListener('keyup', debounce(function(e) {
            console.log(e.target.value);
        }, 500))

        var a = 1;
        debugger
        console.log(a + 2);
    </script>
</body>
</html>